<template>
  <div id="startPage">
    <h1 class="title">启动界面</h1>
    <div class="startPageHeight">
      <el-form ref="startForm" :rules="rules" :model="startForm" class="form-box">
        <el-form-item label="启动广告" prop="ImageUrl" >
          <v-upload title="选择启动图片" type="icon" :picUrl="startForm.ImageUrl" :size="{width:1080, height:1567}" @change="handlePicChange"></v-upload>
        </el-form-item>
        <el-form-item label="广告链接" prop="Url" >
          <el-input v-model="startForm.Url" placeholder="请输入广告链接"/>
        </el-form-item>
        <div class="form-buttons">
          <el-button type="primary" @click="publish" size="mini">保存并发布</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import VUpload from '../../comm/iUpload/iUpload'
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  export default{
    name: 'startPage',
    components: {
      VUpload
    },
    data () {
      return {
        startForm: {
          ImageUrl: '',
          Url: ''
        },
        rules: {
          ImageUrl: [
            { required: true, message: '请选择广告图片', trigger: 'change' }
          ],
          Url: [
            { required: true, message: '请输入广告链接', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      // 查询设置内容,并赋值
      getStartData () {
        let objTime = {t: (new Date()).valueOf()}
        ajax.get(api.GET_STARTADS, objTime).then(res => {
          if (res.Code === 0) {
            this.startForm = res
          }
        })
      },
      handlePicChange (data) {
        this.startForm.ImageUrl = data.url
      },
      // 保存发布
      publish () {
        this.$refs.startForm.validate((valid) => {
          if (valid) {
            ajax.post(api.STARTADSET, this.startForm).then(res => {
              if (res.Code === 0) {
                this.$alert('启动页广告设置成功', '恭喜', {
                  confirmButtonText: '确定'
                })
              }
            })
          } else {
            return false
          }
        })
      }
    },
    created () {
      this.getStartData()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
#startPage
  height 100%
  overflow hidden
  .title
    height 60px
    padding 15px
    line-height 30px
    font-size 18px
    font-weight normal
    background #fff
  .startPageHeight
    height calc(100% - 56px)
    overflow: auto
    background: #fff
    margin:10px 0 0 10px
</style>
<style lang="stylus">
.form-box
  padding 20px
  width 500px
  .el-form-item__label
    float none
    display block
    text-align left
  .form-buttons
    padding 20px 0 10px
    text-align right
</style>
